<template>
    <h2>添加会员详细信息</h2>
    <table border="1">
        <tr>
            <td>用户真实姓名</td>
            <td>
                <input type="text" placeholder="请输入用户真实姓名" v-model="info.mI_Name"/>
            </td>
        </tr>
        <tr>
            <td>手机号</td>
            <td>
                <input type="text" placeholder="请输入手机号" v-model="info.mI_Phone" />
            </td>
        </tr>
        <tr>
            <td>日期</td>
            <td>
                <input type="date" placeholder="请输入日期" v-model="info.mI_Date" />
            </td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>
                <input type="text" placeholder="请输入身份证号" v-model="info.mI_IdCard" @change="GetBirthday"/>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" value="true" v-model="info.mI_Sex"/>女
                <input type="radio" value="false" v-model="info.mI_Sex"/>男
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" value="1" v-model="info.mI_State"/>启用
                <input type="radio" value="0" v-model="info.mI_State"/>禁用
            </td>
        </tr>
        <tr>
            <td>地址</td>
            <td>
                <textarea rows="4" placeholder="请输入地址" v-model="info.mI_Address"></textarea>
            </td>
        </tr>
        <tr>
            <td>积分</td>
            <td>
                <input type="text" placeholder="请输入积分" v-model.number="info.mI_Integral"/>
            </td>
        </tr>
        <tr>
            <td>金额</td>
            <td>
                <input type="text" placeholder="请输入金额" v-model.number="info.mI_Money"/>
            </td>
        </tr>
        <tr>
            <td>会员头像</td>
            <td>
                <img style="width:100px;height:100px;" :src="info.mI_Img" />
                <input type="file" @change="FileUpLoads" />
            </td>
        </tr>
        <tr>
            <td>会员类型</td>
            <td>
                <select v-model.number="info.mT_Id">
                    <option value="0" checked>请选择</option>
                    <option v-for="item in type" :value="item.MT_Id">{{ item.MT_Name }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="提交" @click="addMemberInfo"/>
            </td>
        </tr>
    </table>

</template>

<script setup lang="ts">

    import{ref,onMounted,computed} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter();
    import axios from 'axios'
    
    import {useRoute} from 'vue-router'
    //路由实例 获取传的参数 params属性
    const route=useRoute();


    const info=ref({
  "mL_Id": "",
  "mI_Name": "",
  "mI_Phone": "",
  "mI_Date": "",
  "mI_IdCard": "",
  "mI_Sex": "",
  "mI_State": "",
  "mI_Address": "",
  "mI_Integral":"",
  "mI_Money":"",
  "mI_Img": "",
  "mT_Id": ""
})

const addMemberInfo=()=>{
    alert(route.params.mL_Id);
    axios.post('https://localhost:44320/api/Member/InfoAdd',{
        "mL_Id":route.params.mL_Id,
  "mI_Name": info.value.mI_Name,
  "mI_Phone": info.value.mI_Phone,
  "mI_Date": info.value.mI_Date,
  "mI_IdCard": info.value.mI_IdCard,
  "mI_Sex": info.value.mI_Sex,
  "mI_State": info.value.mI_State,
  "mI_Address": info.value.mI_Address,
  "mI_Integral": info.value.mI_Integral,
  "mI_Money": info.value.mI_Money,
  "mI_Img": info.value.mI_Img,
  "mT_Id": info.value.mT_Id
    })
    .then(res=>{
       console.log(res.data);
       alert('添加成功');  
        router.push('/showMemberInfo');
    })
    .catch(error=>{
        console.log(error);
    })
}


const type=ref([{
    "MT_Id": "",
    "MT_Name": ""
}]);

onMounted(()=>{
    axios.get('https://localhost:44320/api/Member/TypeShow')
    .then(res=>{
        type.value=res.data;
    })
    .catch(error=>{
        console.log(error);
    })
})

const file=ref(null);

const FileUpLoads=(e)=>{
    //将事件对象e的target（代表触发事件元素）属性中files列表中的第一个文件赋值给属性
    file.value=e.target.files[0];

    //判断是否选中文件
    if(!file.value)
    {
        alert('请选择文件');
        return;
    }
    //通过表单数据完成参数接受
    const formData=new FormData();
    formData.append('image',file.value);
    //通过axios完成图片上传
    axios.post("https://localhost:44320/api/Files/FileUpLoad",formData)
    .then(res=>{
        console.log(res.data);
       if(res.data.StateCode==1)
       {
        alert(res.data.StateMessage);
        info.value.mI_Img=res.data.StateData;
       }
       else if(res.data.StateCode==2)
       {
        alert(res.data.StateMessage);
       }
       else{
        alert(res.data.StateMessage);
       }
    })
    .catch(error=>{
        console.log(error);
    })

}
//根据输入的身份证号完成出生年月日的计算
const GetBirthday=computed(()=>{
    //134514   20021212  2536  开始索引包含，结束索引不包含
    var birthday=info.value.mI_IdCard.substring(6,14);
    console.log(birthday);
    //20021212
    var year=birthday.substring(0,4);
    var month=birthday.substring(4,6);
    var day=birthday.substring(6,8);
    info.value.mI_Date=year+'-'+month+'-'+day;
    console.log(info.value.mI_Date);
})






</script>